import Vue from 'vue'
import Router from 'vue-router'
// 路由定义
import routes from './routes'

Vue.use(Router)

const router = new Router({
  routes: routes
})

// 全局解析守卫，完整流程参考https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B
// beforeResolve 会在异步组件加载完成后执行
router.beforeResolve((to, from, next) => {
  // 匹配当前路由使用的组件
  const matchedComponents = router.getMatchedComponents(to.fullPath)
  // 检查组件是否使用标签页布局组件，未使用时为独立页面，直接跳转即可
  if (!matchedComponents.some(component => component.name === router.tabedLayoutName)) {
    next()
    return
  }
  // 非独立页面，找到当前路由使用的组件
  let routerComponents = to.matched[to.matched.length - 1].components
  let routerComponent = routerComponents.default
  // 组件命名检查，主要为了兼容组件内未定义name属性的情况，keep-alive组件根据组件的name判断是否缓存
  // 可根据extendOptions判断是否已处理过
  let componentName = (routerComponent.extendOptions && routerComponent.extendOptions.name) || routerComponent.name
  if (!componentName) {
    componentName = to.name || to.path.replace(/\//g, '')
    let tmp = {
      name: componentName,
      extends: routerComponents.default
    }
    // Vue.extend会派生出新的组件，并有extendOptions属性
    routerComponents.default = Vue.extend(tmp)
  }
  // 预留方法，用于替换当前标签页
  if (to.query.replace === true) {
    router.app.$options.store.commit('replaceTab', {
      tab: {
        fullPath: from.fullPath
      },
      newTab: {
        title: to.meta.title || to.name,
        closable: to.meta.closable,
        fullPath: to.fullPath,
        name: componentName,
        cachable: to.meta.cachable
      }
    })
  } else {
    // 打开新的标签页
    router.app.$options.store.commit('openTab', {
      title: to.meta.title || to.name,
      closable: to.meta.closable,
      fullPath: to.fullPath,
      name: componentName,
      cachable: to.meta.cachable
    })
  }
  next()
})

export default router
